
<style lang="less">
    @import '../../../../../styles/common.less';
    @import '../../../../tables/components/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24" class="padding-left-10">
                <Card>
                    <Row slot="title" type="flex" justify="space-between" align="middle">
                        <H3>{{$t("domain_checkList")}}</H3>
                        <Button type="primary" @click="newCheckList">{{$t("new")}}</Button>
                    </Row>
                    <can-edit-table refs="tablegen-vue" v-model="listCheckList" :hover-show="true" :edit-incell="true"
                                    @on-cell-change="handleCellChange"
                                    @on-change="handleChange"
                                    :columns-list="columns"></can-edit-table>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import canEditTable from '../../../../tables/components/canEditTable.vue';

    export default {
        name: 'CheckList-index',
        components: {
            canEditTable
        },
        data() {
            return {
                columns: [
        {
                        title: this.$t("SN"),
                        type: 'index',
                        align: 'center',
                        width: '100px'
                      },{
                                title: this.$t("field_name"),
                                align: 'center',
                                key: 'name',
                                editable: true},{
                                title: this.$t("field_product"),
                                align: 'center',
                                key: 'product',
                                editable: true},{
                                title: this.$t("field_dateCreated"),
                                align: 'center',
                                key: 'dateCreated',
                                editable: true},{
                                title: this.$t("field_lastUpdated"),
                                align: 'center',
                                key: 'lastUpdated',
                                editable: true},{
                                title: this.$t("field_creator"),
                                align: 'center',
                                key: 'creator',
                                editable: true},{
                                title: this.$t("field_lastUpdater"),
                                align: 'center',
                                key: 'lastUpdater',
                                editable: true},
        {
            title: this.$t("operation"),
            align: 'center',
            width: '200px',
            key: 'handle',
//            fixed: 'right',
            handle: ['edit', 'delete']
        }
    ],
                listCheckList: []
            };
        },
        methods: {
            newCheckList() {
                let CheckList = {}
                CheckList.isNew = true
                this.listCheckList.unshift(CheckList)

            },
            handleNetConnect(state) {
                this.breakConnect = state;
            },
            handleLowSpeed(state) {
                this.lowNetSpeed = state;
            },
            getCurrentData() {
                this.showCurrentTableData = true;
            },
            handleDel(val, index) {
                this.$Message.success('删除了第' + (index + 1) + '行数据');
            },
            handleCellChange(val, index, key) {
                debugger
                fetch(`http://localhost:8080/checkList`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(val[index])
                }).then(r => r.json())
                    .then(json => {
                        this.$Message.success('修改了第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据');
                    })
                    .catch(ex =>
                        this.$Message.error('修改第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据失败，详情：' + ex))

            },
            handleChange(val, index) {
                fetch(`http://localhost:8080/checkList`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(val[index])
                }).then(r => r.json())
                    .then(json => {
                        this.$Message.success('修改了第 ' + (index + 1) + ' 行的数据');
                    })
                    .catch(ex =>
                        this.$Message.error('修改第 ' + (index + 1) + ' 行的数据失败，详情：' + ex))
            }
        },
        created() {
            fetch(`http://localhost:8080/checkList`)
                .then(response => response.json())
                .then(json => {
                    if(json.message){
                        this.$Message.error(json.message)
                    }else {
                        this.listCheckList = json
                    }
                })
        }
    };
</script>

